<template>
  <div class="vaw-layout-container" :class="[appStore.deviceType === 'mobile' && 'is-mobile', appStore.theme]">
    <!-- 公共头部 -->
    <VAWHeader class="header-wrapper" />
    <!-- 主内容区 -->
    <div class="main-wrapper">
      <!-- 左右布局时的侧边栏 -->
      <SideBar v-if="appStore.layoutMode === 'ltr'" class="sidebar-wrapper" />

      <!-- 页面内容区 -->
      <MainLayout class="content-wrapper" />
    </div>
    <!-- <div
      v-if="appStore.deviceType === 'mobile'"
      class="mobile-shadow"
      :class="[appStore.isCollapse ? 'close-shadow' : 'show-shadow']"
      @click="closeMenu"
    ></div> -->
  </div>
  <Setting ref="settingRef" />
  <SearchContent ref="searchContentRef" />
</template>

<script lang="ts">
  import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
  import useEmit from '@/hooks/useEmit'
  import { AxiosResponse } from 'axios'
  import UserTokenExpiredInterceptor from '@/api/interceptors/UserTokenExpiredInterceptor'
  import useAxios from '@/hooks/useAxios'
  import useAppConfigStore from '@/store/modules/app-config'
  import { useChangeMenuWidth } from '@/hooks/useMenuWidth'
  import usePrimaryColor from '@/hooks/usePrimaryColor'
  import useTheme from '@/hooks/useTheme'
  import { DeviceType } from '@/store/types'
  import CustomRequestInterceptor from '@/api/interceptors/CustomRequestInterceptor'
  export default defineComponent({
    name: 'Layout',
    setup() {
      const settingRef = ref()
      const searchContentRef = ref()
      const appStore = useAppConfigStore()
      useTheme(appStore.theme as 'light' | 'dark')
      useChangeMenuWidth(appStore.sideWidth)
      usePrimaryColor(appStore.themeColor)
      const emitter = useEmit()
      const axios = useAxios()
      axios.interceptors.request.use((config) => {
        return CustomRequestInterceptor(config)
      })
      axios.interceptors.response.use((response: AxiosResponse): AxiosResponse => {
        return UserTokenExpiredInterceptor(response)
      })
      emitter?.on('show-setting', () => {
        settingRef.value?.openDrawer()
      })
      emitter?.on('show-search', () => {
        searchContentRef.value?.show()
      })
      onMounted(() => {
        handleScreenResize()
        window.addEventListener('resize', handleScreenResize)
      })
      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleScreenResize)
      })
      function handleScreenResize() {
        const width = document.body.clientWidth
        if (width <= 768) {
          appStore.changeDevice(DeviceType.MOBILE)
          appStore.toggleCollapse(true)
        } else if (width < 992 && width > 768) {
          appStore.changeDevice(DeviceType.PAD)
          appStore.toggleCollapse(true)
        } else if (width < 1200 && width >= 992) {
          appStore.changeDevice(DeviceType.PC)
          appStore.toggleCollapse(false)
        } else {
          appStore.changeDevice(DeviceType.PC)
          appStore.toggleCollapse(false)
        }
      }
      function closeMenu() {
        appStore.toggleCollapse(true)
      }
      return {
        settingRef,
        searchContentRef,
        appStore,
        closeMenu,
      }
    },
  })
</script>

<style lang="less">
  /*.vaw-layout-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative; !* 添加这个以确保子元素的定位参考 *!

    !* 顶部菜单栏固定高度 *!
    .header-wrapper {
      height: @logoHeight; // 假设为60px
      flex-shrink: 0; // 禁止压缩高度
      position: sticky;
      top: 0;
      z-index: 1000;
      background: white; !* 确保有背景色，防止透明 *!
      box-shadow: 0 2px 5px rgba(0,0,0,0.1); !* 可选：添加阴影区分层次 *!
    }

    !* 主内容区 *!
    .main-wrapper {
      display: flex;
      flex: 1;
      overflow: hidden;
      position: relative; !* 确保内部定位正确 *!
      margin-top: 0; !* 确保没有额外的margin *!

      !* 左右布局时的侧边栏 *!
      .sidebar-wrapper {
        width: @menuWidth; // 假设为200px
        height: calc(100vh - @logoHeight); // 关键调整：扣除顶部高度
        overflow-y: auto;
        flex-shrink: 0;
        position: sticky;
        top: @logoHeight; !* 关键：设置与header相同的高度 *!
        z-index: 999; !* 比header低一个层级 *!
      }

      !* 内容区域 *!
      .content-wrapper {
        flex: 1;
        overflow: hidden; !* 允许内部滚动 *!
        background: transparent; !* 避免覆盖 MainLayout 背景 *!
        padding: 0; !* 由 MainLayout 控制内边距 *!
      }
    }
  }*/
  .vaw-layout-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f3f6f8; /* 全局背景色 */

    /* 顶部菜单栏 */
    .header-wrapper {
      height: @logoHeight; /* 假设为 60px */
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #cb8bba;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* 主内容区 */
    .main-wrapper {
      display: flex;
      flex: 1;
      overflow: hidden;

      /* 左侧菜单栏 */
      .sidebar-wrapper {
        width: @menuWidth; /* 假设为 220px */
        height: calc(100vh - @logoHeight); /* 关键：扣除顶部高度 */
        overflow-y: auto;
        flex-shrink: 0;
        position: sticky;
        top: @logoHeight; /* 固定在顶部菜单栏下方 */
        z-index: 999;
        background: var(--el-menu-bg-color); /* 菜单背景色 */
      }

      /* 主内容区域 */
      .content-wrapper {
        flex: 1;
        overflow: auto;
        background: #fff; /* 内容背景色 */
        border-radius: 4px; /* 圆角 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
        margin: 16px 16px 16px 0; /* 外边距（避开左侧菜单栏） */
        padding: 16px; /* 内边距 */
      }
    }
  }
</style>
